import React from 'react';
import { Table } from 'antd';
import { TableC, FirstHeaderC } from '../../comps';

class NestedTableDemo extends React.Component {
  state = {
    expanded: [2, 3, 4],
  };
  onExpand = (expanded, record) => {
    let expandedId = this.state.expanded;
    if (expanded) {
      expandedId.push(record.key);
    } else {
      expandedId = expandedId.filter((item) => item.key != record.key);
    }
    this.setState({
      expanded: expandedId,
    });
  };
  render() {
    const columns = [
      { title: 'Name', dataIndex: 'name', key: 'name' },
      { title: 'Platform', dataIndex: 'platform', key: 'platform' },
      { title: 'Version', dataIndex: 'version', key: 'version' },
      { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
      { title: 'Creator', dataIndex: 'creator', key: 'creator' },
      { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
    ];
    const data = [];
    for (let i = 0; i < 3; ++i) {
      data.push({
        key: i,
        name: 'Screem',
        platform: 'iOS',
        version: '10.3.4.5654',
        upgradeNum: 500,
        creator: 'Jack',
        createdAt: '2014-12-24 23:12:00',
      });
    }
    const expandedRowRender = (record) => {
      let columns = [];
      let data = [];

      if (record.key == 0) {
        columns = [
          { title: 'Date', dataIndex: 'date', key: 'date' },
          { title: 'Name', dataIndex: 'name', key: 'name' },
          { title: 'Status', key: 'state', dataIndex: 'state' },
        ];

        data = [];
        for (let i = 0; i < 3; ++i) {
          data.push({
            key: i,
            date: '2014-12-24 23:12:00',
            name: 'This is production name',
            state: 'Upgraded: 56',
          });
        }
      }
      if (record.key == 1) {
        columns = [
          { title: '班级', dataIndex: 'class', key: 'class' },
          { title: '姓名', dataIndex: 'name', key: 'name' },
        ];

        data = [];
        for (let i = 0; i < 1; ++i) {
          data.push({
            key: i,
            class: '一班',
            name: '小红',
          });
        }
      }
      if (record.key == 2) {
        columns = [
          { title: '颜色', dataIndex: 'color', key: 'color' },
          { title: '数字', dataIndex: 'num', key: 'num' },
        ];

        data = [];
        for (let i = 0; i < 3; ++i) {
          data.push({
            key: i,
            color: '红色',
            num: i,
          });
        }
      }

      return <Table columns={columns} dataSource={data} pagination={false} />;
    };

    const columns1 = [
      { title: 'Name', key: 'name' },
      { title: '价格(保留4位）', key: 'platform', type: 'money', toFixed: '4' },
      { title: 'Version', key: 'version' },
      { title: '数值', key: 'upgradeNum', type: 'number' },
      { title: '比率', key: 'creator', type: 'rate' },
      { title: '价格（默认保留2位）', key: 'price', type: 'money' },
      { title: 'Date', key: 'createdAt' },
    ];
    const data1 = [];
    for (let i = 0; i < 100; ++i) {
      let children = [];
      for (let j = 0; j < 2; j++) {
        children.push({
          key: `${i}_${j}`,
          name: 'Screem' + i + j,
          platform: 0,
          version: '10.3.4.5654',
          upgradeNum: 5698.23452,
          creator: '0.121',
          price: '123.56895',
          createdAt: '2014-12-24 23:12:00',
        });
      }
      data1.push({
        key: i,
        name: 'Screem' + i,
        platform: 0,
        version: '10.3.4.5654',
        upgradeNum: 5698.23452,
        creator: '0.121',
        price: '123.56895',
        createdAt: '2014-12-24 23:12:00',
        children: children,
      });
    }

    return (
      <div>
        <FirstHeaderC title='展开后是独立表格' />
        <Table columns={columns} expandedRowRender={expandedRowRender} dataSource={data} />
        <FirstHeaderC title='展开后是父子节点' />
        <TableC columns={columns1} dataSource={data1} pageSize={10} current={1} rowKey='key' />
        <FirstHeaderC title='展开后是父子节点,有初始化展开设置' />
        <TableC columns={columns1} dataSource={data1} pageSize={10} current={1} rowKey='key' expandedRowKeys={this.state.expanded} onExpand={this.onExpand} />
      </div>
    );
  }
}

export default NestedTableDemo;
